<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div id="app">
    <div class="logo">
      <img src="https://www.baidu.com/img/bd_logo1.png?where=super" title="点击一下，了解更多" />
    </div>

    <div class="search-box">
      <span class="search-area">
        <!-- @blur失去焦点,@focus获得焦点 -->
        <input type="text" maxlength="100" v-model="searchContent" 
          @blur="isShow=false"
          @focus="isShow=true" />
        <span class="icon icon-paizhao"></span></span>
      <span class="search-btn">百度一下</span>
    </div>

    <ul class="search-list" v-show="isShow&&searchList.length>0">
      <li v-for="search in searchList" :key="search">{{search}}</li>
    </ul>
  </div>
  <!-- lodash是节流和防抖  -->
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>

    // 全局变量_
    // _.throttle节流
    // _.debounce防抖

    var vm = new Vue({
      el: "#app",
      data: {
        // 用户输入的内容
        searchContent: "",
        searchList: [],
        isShow: false,
      },
      methods: {
        // 我们平常写的方法要通路由访问，但是这个是百度的接口，人家路由已经帮我们写好了，
        // 所以直接可以访问到
        getSearch(data) {
          console.log(data);
          // return 2;要写返回值才没有undefined               
          this.searchList = data.s
        }
      },
      watch: {
        //防抖的作用：一松手才会有对应的请求，请求频率得到了控制
        //key        ：  值，会被多次调用
        searchContent: _.debounce(function(val) {
          var that = this;
          // ajax() 方法用于执行 AJAX（异步 HTTP）请求。
          $.ajax({
            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
            dataType: "jsonp",
            data: {
              // wd:vm.searchContent,
              wd: that.searchContent,
              // 服务器会让这个函数自动执行
              cb: "vm.getSearch"
            },

          })
        },300)
      }
    })
  </script>
</body>

</html>